<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>ari-router demo(利用pushState)</title>
    <script src="../air-router.js"></script>
    <style>
        body{font-size: 20px;}
        a{text-decoration: underline;}
        a{color:#000;}
        #print_w{background:#AAD2F0;border-radius:30px;padding:50px;margin-top:20px;}
        #info_w{padding:20px 0;}
        .btn{color:#AAD2F0;}
    </style>
</head>
<body>

<a href="/">匹配 /</a>
<br/>
<a href="/news/">匹配 /news/</a>
<br/>
<a href="/news/22/1">匹配 /news/:category(/:id)</a>
<br/>
<a href="/news/22">匹配 /news/:category(/:id)</a>
<br/>
<a href="/order/search">匹配 /order/*</a>

<div id="print_w">
    回调中输出的结果（观察地址栏的变化）：
    <div id="info_w"></div>
</div>


<script>
    var router = airRouter({
        useHistoryState: true,
        links: document.querySelectorAll('a[href]')
    });
    router.when('/', function () {
        print_info('匹配根路径');
    }).when('/news/', function () {
        print_info('匹配/news/');
    }).when('/news/:category(/:id)', function (category, id) {
        print_info('category值为' + category + '，id值为' + (!id ? '无' : id));
    }).when('/order/*', function (starString) {
        print_info('*的值为' + starString)
    }).otherwise('/').start();

    function print_info(info) {
        var info_w = document.getElementById('info_w');
        info_w.innerHTML = info;
    }
</script>
</body>
</html>